<style>
    @import url("https://fonts.googleapis.com/css?family=Raleway:300,800");
    body {
        background-color: #0072ff;
    }
    body h1 {
        text-align: center;
        font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
        color: white;
        font-size: 30px;
        font-weight: normal;
    }
    body .adder {
        position: relative;
        width: 250px;
        margin: 0px auto;
        display: block;
    }
    body .adder ::-webkit-input-placeholder {
        color: #cecece;
    }
    body .adder .input {
        outline: none;
        border: 1px solid white;
        background-color: #0072ff;
        color: white;
        height: 50px;
        width: 250px;
        padding-left: 10px;
        font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
        font-weight: 800;
        font-size: 16px;
        margin-left: -5px;
    }
    body .adder span {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 30px;
        font-weight: 800;
        line-height: 1.8;
        cursor: pointer;
        transition: all 200ms;
        color: white;
        will-change: transform;
    }
    body .adder span:hover {
        transform: rotate(180deg);
    }
    body ul {
        padding: 0px;
    }
    body ul .draggable {
        will-change: transform;
        font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
        font-weight: 800;
        height: 50px;
        list-style-type: none;
        margin: 10px;
        background-color: white;
        color: #0072ff;
        width: 250px;
        line-height: 50px;
        padding-left: 10px;
        cursor: move;
        transition: all 200ms;
        user-select: none;
        margin: 10px auto;
        position: relative;
    }
    body ul .draggable:after {
        content: '拖拽排序';
        right: 7px;
        font-size: 10px;
        position: absolute;
        cursor: pointer;
        line-height: 50px;
        transition: all 200ms;
        transition-timing-function: cubic-bezier(0.48, 0.72, 0.62, 1.5);
        transform: translateX(120%);
        opacity: 0;
    }
    body ul .draggable:hover:after {
        opacity: 1;
        transform: translate(0);
    }

    .over {
        transform: scale(1.1, 1.1);
    }
</style>
<link type="text/css" rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link type="text/css" rel="stylesheet" href="css/style.css">

<h1>可增加内容和拖拽排序的列表</h1>
<div class="adder">
    <input type="text" class="input" placeholder="增加一项技能"/>
    <span class="add">+</span>
</div>
<ul>
    <li class="draggable" draggable="true">JavaScript</li>
    <li class="draggable" draggable="true">CSS3</li>
    <li class="draggable" draggable="true">HTML5</li>
    <li class="draggable" draggable="true">PHP</li>
    <li class="draggable" draggable="true">MySQL</li>
</ul>

<script>
    var btn = document.querySelector('.add');
    var remove = document.querySelector('.draggable');

    function dragStart(e) {
        this.style.opacity = '0.4';
        dragSrcEl = this;
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text/html', this.innerHTML);
    };

    function dragEnter(e) {
        this.classList.add('over');
    }

    function dragLeave(e) {
        e.stopPropagation();
        this.classList.remove('over');
    }

    function dragOver(e) {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'move';
        return false;
    }

    function dragDrop(e) {
        if (dragSrcEl != this) {
            dragSrcEl.innerHTML = this.innerHTML;
            this.innerHTML = e.dataTransfer.getData('text/html');
        }
        return false;
    }

    function dragEnd(e) {
        var listItens = document.querySelectorAll('.draggable');
        [].forEach.call(listItens, function(item) {
            item.classList.remove('over');
        });
        this.style.opacity = '1';
    }

    function addEventsDragAndDrop(el) {
        el.addEventListener('dragstart', dragStart, false);
        el.addEventListener('dragenter', dragEnter, false);
        el.addEventListener('dragover', dragOver, false);
        el.addEventListener('dragleave', dragLeave, false);
        el.addEventListener('drop', dragDrop, false);
        el.addEventListener('dragend', dragEnd, false);
    }

    var listItens = document.querySelectorAll('.draggable');
    [].forEach.call(listItens, function(item) {
        addEventsDragAndDrop(item);
    });

    function addNewItem() {
        var newItem = document.querySelector('.input').value;
        if (newItem != '') {
            document.querySelector('.input').value = '';
            var li = document.createElement('li');
            var attr = document.createAttribute('draggable');
            var ul = document.querySelector('ul');
            li.className = 'draggable';
            attr.value = 'true';
            li.setAttributeNode(attr);
            li.appendChild(document.createTextNode(newItem));
            ul.appendChild(li);
            addEventsDragAndDrop(li);
        }
    }

    btn.addEventListener('click', addNewItem);

</script>